import React from 'react';
import { Card, Form, Input, Select, Switch, Button, message } from 'antd';
import { SaveOutlined } from '@ant-design/icons';

const { Option } = Select;

const Settings = () => {
  const [form] = Form.useForm();

  // 模拟初始设置数据
  const initialValues = {
    siteName: '管理后台',
    siteDescription: '这是一个示例管理后台系统',
    theme: 'light',
    language: 'zh-CN',
    enableRegistration: true,
    maxUploadSize: 10,
  };

  const onFinish = (values) => {
    console.log('设置提交:', values);
    message.success('设置保存成功');
  };

  return (
    <div>
      <Card title="系统设置" variant="filled">
        <Form form={form} layout="vertical" initialValues={initialValues} onFinish={onFinish}>
          <Form.Item name="siteName" label="网站名称" rules={[{ required: true, message: '请输入网站名称' }]}>
            <Input placeholder="请输入网站名称" />
          </Form.Item>

          <Form.Item name="siteDescription" label="网站描述">
            <Input.TextArea placeholder="请输入网站描述" rows={4} />
          </Form.Item>

          <Form.Item name="theme" label="主题" rules={[{ required: true, message: '请选择主题' }]}>
            <Select placeholder="请选择主题">
              <Option value="light">浅色主题</Option>
              <Option value="dark">深色主题</Option>
            </Select>
          </Form.Item>

          <Form.Item name="language" label="语言" rules={[{ required: true, message: '请选择语言' }]}>
            <Select placeholder="请选择语言">
              <Option value="zh-CN">中文</Option>
              <Option value="en-US">英文</Option>
            </Select>
          </Form.Item>

          <Form.Item name="enableRegistration" label="启用注册" valuePropName="checked">
            <Switch />
          </Form.Item>

          <Form.Item name="maxUploadSize" label="最大上传大小(MB)" rules={[{ required: true, message: '请输入最大上传大小' }, { type: 'number', min: 1, message: '最小上传大小为1MB' }]}>
            <Input type="number" placeholder="请输入最大上传大小" />
          </Form.Item>

          <Form.Item>
            <Button type="primary" icon={<SaveOutlined />} htmlType="submit" style={{ marginRight: 8 }}>保存设置</Button>
            <Button onClick={() => form.resetFields()}>重置</Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};

export default Settings;